* {
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
    width: 100%;
    margin: 0;
    background-image: url('../../image/common/sky.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.ui-detail{
    width: 100%;
    padding: .48rem .3rem 1rem;
    .ui-item{
        display: block;
        line-height: .48rem;
        font-size: .32rem;
        color: #fff;
        padding: .2rem .3rem;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: .2rem;
        margin-bottom: .3rem;
        .ui-item-head{
            display: block;
            position: relative;
            width: 100%;
            height: 2rem;
            padding: .2rem 0 .2rem 1.8rem;
            .ui-head-avatar{
                display: block;
                position: absolute;
                top: .2rem;
                left: 0;
                width: 1.6rem;
                height: 1.6rem;
                line-height: 1.6rem;
                border-radius: 50%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                background-color: #eee;
                // background-image: url('../../image/common/sky.gif');
            }
            .ui-head-name{
                display: block;
                line-height: 1rem;
                font-size: .6rem;
                color: #fff;
                margin-bottom: .1rem;
            }
            .ui-head-date{
                display: block;
                font-size: .3rem;
                color: #fff;
            }
            .ui-head-number{
                display: block;
                position: absolute;
                top: .54rem;
                right: 0;
                width: 2rem;
                height: 1rem;
                line-height: 1rem;
                font-size: .8rem;
                color: #fff;
            }
        }
        .ui-item-travel{
            display: block;
            height: .48rem;
            clear: both;
            .ui-item-left{
                float: left;
            }
            .ui-item-right{
                float: right;
            }
        }
    }
    .head{
        padding-right: 0;
    }
    .ui-item-content{
        display: block;
        line-height: .36rem;
        font-size: .28rem;
        color: #fff;
        margin-bottom: .1rem;
    }
}
.ui-footer{
    display: block;
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    padding: .16rem 2rem .16rem .2rem;
    background-color: #fff;
    .ui-footer-input{
        display: block;
        width: 100%;
        height: .68rem;
        line-height: .68rem;
        font-size: .32rem;
        color: #555;
        padding: 0 .1rem;
        border: none;
        border-radius: .06rem;
        outline: none;
        background-color: #eee;
    }
    .ui-footer-send{
        display: block;
        position: absolute;
        right: .2rem;
        top: .16rem;
        width: 1.6rem;
        height: .68rem;
        line-height: .68rem;
        font-size: .36rem;
        color: #fff;
        text-align: center;
        border-radius: .12rem;
        background-color: #1C86EE;
        border: none;
        outline: none;

    }
}